<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生成绩管理系统注册</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    
    <style>
        .box-card {
            width: 580px;
            margin: 0 auto;
            background-color: rgba(255, 255, 255, 0.5);
        }
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #注册 {
            background-color: #67C23A;
            color: #fff;
        }
        #返回登录 {
            background-color: #909399;
            color: #fff;
        }
        video {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -100;
        }
        #系统标题 {
            position: relative;
            left: 110px;
            font-weight: bold;
            font-family: '楷体';
            font-size: 40px;
        }
    </style>
</head>

<video id="myVideo" autoplay  muted>
    <source id="videoSource" src="./video/登录.mp4" type="video/mp4"></source>
  </video>
  <script>
  const video = document.getElementById('myVideo');
  video.addEventListener('ended', function() {
    video.currentTime = 0;
    video.play();
  });
  
  </script>

<body>
    <div id="app">
        <el-card class="box-card" style="width: 480px; margin: 10% auto;">
            <div slot="header" class="clearfix">
                <span>注册</span>
                <span id="系统标题" style="font-size: 20px;">学生成绩管理系统</span>
            </div>
            <el-form :model="form" :rules="rules" ref="registerForm" label-width="100px">
                <!-- 公共字段 -->
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword">
                    <el-input type="password" v-model="form.confirmPassword"></el-input>
                </el-form-item>
                
                <!-- 角色选择 -->
                <el-form-item label="角色" prop="role">
                    <el-select v-model="form.role" placeholder="请选择身份" @change="handleRoleChange">
                        <el-option label="学生" value="1"></el-option>
                        <el-option label="教师" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <!-- 学生专属字段 -->
                <template v-if="form.role === '1'">
                    <el-form-item label="学号" prop="studentId">
                        <el-input v-model.number="form.studentId"></el-input>
                    </el-form-item>
                    <el-form-item label="班级名称" prop="className">
                        <el-input v-model="form.className"  placeholder="如:22级计科1班"></el-input>
                    </el-form-item>
                </template>

                <!-- 教师专属字段 -->
                <template v-if="form.role === '2'">
                    <el-form-item label="工号" prop="teacherId">
                        <el-input v-model.number="form.teacherId"></el-input>
                    </el-form-item>
                </template>

                <el-form-item>
                    <el-button id="注册" type="button" @click="submitForm">立即注册</el-button>
                    <el-button id="返回登录" @click="gotoLogin">返回登录</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    form: {
                        username: '',
                        name: '',
                        password: '',
                        confirmPassword: '',
                        role: '',
                        studentId: null,
                        className: '',
                        teacherId: null
                    },
                    rules: {
                        username: [
                            { required: true, message: '请输入用户名', trigger: 'blur' }
                        ],
                        realname: [
                            { required: true, message: '请输入真实姓名', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请输入密码', trigger: 'blur' },
                            { min: 6, message: '密码长度至少6位', trigger: 'blur' }
                        ],
                        confirmPassword: [
                            { 
                                validator: (rule, value, callback) => {
                                    if (value !== this.form.password) {
                                        callback(new Error('两次输入密码不一致'));
                                    } else {
                                        callback();
                                    }
                                }, 
                                trigger: 'blur' 
                            }
                        ],
                        role: [
                            { required: true, message: '请选择角色', trigger: 'change' }
                        ],
                        studentId: [
                            { 
                                required: true, 
                                message: '请输入学号',
                                trigger: 'blur',
                                validator: (rule, value, callback) => {
                                    if (this.form.role === 'student' && !value) {
                                        callback(new Error('学号不能为空'));
                                    } else {
                                        callback();
                                    }
                                }
                            },
                            { type: 'number', message: '学号必须为数字' }
                        ],
                        teacherId: [
                            { 
                                required: true, 
                                message: '请输入工号',
                                trigger: 'blur',
                                validator: (rule, value, callback) => {
                                    if (this.form.role === 'teacher' && !value) {
                                        callback(new Error('工号不能为空'));
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ],
                        className: [
                            { 
                                required: true, 
                                message: '请输入班级名称',
                                trigger: 'blur',
                                validator: (rule, value, callback) => {
                                    if (this.form.role === 'student' && !value) {
                                        callback(new Error('班级名称不能为空'));
                                    } else {
                                        callback();
                                    }
                                }
                            }
                        ]
                    }
                };
            },
            methods: {
                handleRoleChange() {
                    // 切换角色时清空专属字段
                    this.form.studentId = null;
                    this.form.teacherId = null;
                    this.form.className = '';
                },
                submitForm() {
                    this.$refs.registerForm.validate(valid => {
                        if (valid) {
                            const postData = {
                                role: this.form.role,
                                username: this.form.username,
                                name: this.form.name,
                                password: this.form.password
                            };

                            if (this.form.role === '1') {
                                postData.studentId = this.form.studentId;
                                postData.className = this.form.className;
                            } else if (this.form.role === '2') {
                                postData.teacherId = this.form.teacherId;
                            }

                            axios.post('http://localhost:8080/register', postData)
                                .then(response => {
                                    if (response.data.success) {
                                        alert('注册成功');
                                        this.gotoLogin();
                                    } else {
                                        alert(response.data.message || '注册失败');
                                    }
                                })
                                .catch(error => {
                                    console.error('注册请求失败:', error);
                                    alert('注册失败，请稍后重试');
                                });
                        }
                    });
                },
                gotoLogin() {
                    window.location.href = './login.html';
                }
            }
        });
    </script>
</body>
</html>